<template>
  <div class="page">
    <div class="content">
      <a-card title="ip来源分析" :bordered="true" style="width: 100%">
        <a-table
          :pagination="false"
          :columns="columns"
          :dataSource="data"
        ></a-table>
      </a-card>
    </div>
  </div>
</template>
<script lang="ts">
import { useAnalysisStore, useSettingBasicStore } from '@/store/setting';
import { computed, defineComponent, watchEffect } from 'vue';
export default defineComponent({
  components: {},
  setup() {
    const analysisState = useAnalysisStore();
    const basic = useSettingBasicStore();

    const queId = computed(() => basic.queId);

    watchEffect(() => {
      // analysisState.reSetTips();
      analysisState.getIps(queId.value);
    });
    const columns = [
      {
        title: 'ip地址',
        dataIndex: 'ip',
        key: 'ip',
      },
      {
        title: '答案份数',
        dataIndex: 'sum',
        key: 'sum',
      },
    ];

    const data = computed(() => analysisState.iplist);
    return { columns, data };
  },
});
</script>
<style lang="less" scoped>
.page {
  width: 100%;
  height: calc(100vh - 70px);
  overflow-x: hidden;
  overflow-y: scroll;
  display: flex;
  justify-content: center;
  .content {
    width: 846px;
    display: flex;
    flex-direction: column;
    padding-top: 24px;
    background-color: white;
    border-radius: 8px;
    margin: 24px;
    padding: 24px;
  }
}
</style>
